<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link rel="stylesheet" type="text/css" href="./css/baseCss.css">
	<link rel="stylesheet" type="text/css" href="./css/courseDetail.css">
	<title>课程详情</title>
	<style type="text/css">
		.blueBtn{
			width: 100%;
		}
        .centerBgLight{
            padding-top: 0;
        }
        .centerBgLight_bread{
            height: 30px;
            line-height: 30px;
            color: #666666;
            padding: 10px 0;
            font-size: 12px;
        }
        .bread_logo{
            padding: 0 10px;
        }
	</style>
</head>

<body>
	<div id="example">
		<all-header></all-header>
		<section id="courseDetail">
			<div class="centerBg">
				<img class="imgBai" src="./img/bg02.png">
				<div class="centerBgLight">
                    <div class="centerBgLight_bread">
                        <span>{{crumbs.level1}}</span><span class="bread_logo">></span><span>{{crumbs.level2}}</span><span class="bread_logo">></span><span>{{crumbs.level3}}</span>
                    </div>
					<div class="centerBgLight_img"><img class="imgBai" :src="add(courseDetail.photo)"></div>
					<div class="centerBgLight_text">
						<div class="centerBgLight_tit">{{courseDetail.name}}</div>
						<div><span class="centerBgLight_logo">课程介绍</span></div>
						<div class="centerBgLight_list">
							<div><div>授课讲师:&nbsp&nbsp&nbsp</div><div>{{courseDetail.teacherName}}</div></div>
							<div><div>教程程度:&nbsp&nbsp&nbsp</div><div>{{levelName}}</div></div>
							<div><div>所需基础:&nbsp&nbsp&nbsp</div><div>{{courseDetail.basics}}</div></div>
						</div>
						<div class="centerBgLight_proInc">
							<div>
								<span>学习</span>
								<div class="centerBgLight_pro"><div class="centerBgLight_proBlue"></div></div>
								<span><span class="buleColor">{{percentIs}}</span>%</span>
							</div>
							<div class="centerBgLight_course">已完成:&nbsp&nbsp&nbsp{{clsPercent}}课时</div>
							<div><button class="blueBtn" @click='study'>{{studyText}}</button></div>
						</div>
					</div>
				</div>
			</div>

		</section>
		<section class="video">
			<div class="videoLeft">
				<div class="videoTitle">课程</div>
				<ul class="videoLeft_listInc">
					<li @click="videoSel($event,video.id,video.url,index,video.relatedId)" class="videoLeft_list" v-for="(video,index) in courseDetail.videos">
						<div class="videoLeft_listSel"></div>
						<div class="videoLeft_listText">L{{index+1}}:&nbsp&nbsp{{video.name}}</div>
						<div class="videoLeft_listLogo"><img src="./img/video01.png"></div>
					</li>
					<!--<li class="videoLeft_list videoLeft_listTar">-->
						<!--<div class="videoLeft_listSel"></div>-->
						<!--<div class="videoLeft_listText">L1:&nbsp&nbsp利用文档导航窗格控制文档结构</div>-->
						<!--<div class="videoLeft_listLogo"><img src="./img/video01.png"></div>-->
					<!--</li>-->
				</ul>
			</div>
			<div class="videoRight">
				<div class="videoTitle">课程简介</div>
				<div class="videoRight_text">
					{{courseDetail.introduce}}
				</div>
			</div>
		</section>

		<all-footer></all-footer>
	</div>
</body>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/httpUnit.js"></script>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript" src="./component/allHeader.js"></script>
<script type="text/javascript" src="./component/allFooter.js"></script>
<script type="text/javascript">

    videoVue();
    //Vue函数
    function videoVue() {

        var allheader = allHeader();
        var allfooter = allFooter();
        var vm = new Vue({
            el: '#example',
            data: {
                courseDetail:"",
				level:"",
                // percent:0,
                isStudy:false,
                studyText:"",
                crumbs:""
			},
            mounted:function(){
                this.subjectDetail();
                this.seeAmount();
                $(".centerBgLight_proBlue").width(this.precent+"%");
                
                
            },
			methods:{
                //课程详情
                subjectDetail:function(){
                    // 面包屑功能
                    var crumbs = sessionStorage.getItem("crumbs");

                    if(crumbs==undefined||crumbs==""||crumbs==null){

                    }else{
                    	crumbs = JSON.parse(crumbs);
                        this.crumbs = crumbs;
                    }
                     

                    var Request = this.GetRequest();
                    var id = Request['id'];
                    var obj = JSON.stringify({
                        "id": id
                    });
                    httpHelperpost("/api/subjects/subjectDetail", obj, function(isSuccess, data) {
                        if (isSuccess == true) {
                            var response = data.responseText;
                            var value = JSON.parse(response);

                            // console.log(response);

                            if(value.code == 0){
                                console.log("查询成功");
								vm.courseDetail = value.data;
								
                                
                                if(value.data.schedule==0){
                                	vm.isStudy = false;
                                	vm.studyText = "开始学习";
                                }else if(value.data.schedule==1){
                                	vm.isStudy = true;
                                	vm.studyText = "继续学习";
                                    
                                }else if(value.data.schedule==2){
                                	vm.isStudy = true;
                                	vm.studyText = "已完成"
                                }else if(value.data.schedule==3){
									vm.isStudy = true;
									vm.studyText = "考试中"
								}else{
                                	vm.isStudy = false;
                                }
                            }else if(value.code==401){
                                alert(value.message);
                                window.location.href='./login.html';
                            }else{
                                alert(value.message);
                                console.log("查询失败");
                                window.history.go(-1);
                            }
                        }else {}
                    });
				},
				//开始学习按钮
				study:function(){
					var Request = this.GetRequest();
                    var id = Request['id'];
                    var obj = JSON.stringify({
                        "id": id
                    });
					httpHelperpost("/api/videoStudents/study", obj, function(isSuccess, data) {
                        if (isSuccess == true) {
                            var response = data.responseText;
                            var value = JSON.parse(response);

                            // console.log(response);

                            if(value.code == 0){
                                console.log("查询成功");
								vm.isStudy = true;
                                $(".centerBgLight_proInc .blueBtn").text("继续学习");
                                alert(value.message);
                            }else if(value.code==401){
                                alert(value.message);
                                window.location.href='./login.html';
                            }else{
                                alert(value.message);
                                console.log("查询失败");
                            }
                        }else {}
                    });
				},
				//选中当前播放视频
                videoSel:function(that,id,url,index,relatedId){
					$(that.currentTarget).addClass("videoLeft_listTar").siblings().removeClass("videoLeft_listTar");

                    if(this.isStudy==true){
                        var Request = this.GetRequest();
                        var subjectId = Request['id'];
                        var curvideo = {id:id,subjectId:subjectId,url:url,index:index,relatedId:relatedId};
                        sessionStorage.setItem("curvideo",JSON.stringify(curvideo));
                        // window.location.href="./courseDetailPlay.html";
                        window.open("./courseDetailPlay.html");
                    }else{
                        alert("请点击开始学习");
                    }
				},
				//跳转到视频播放界面
				// disvideoPlay:function (id,url,index){
				// 	if(this.isStudy==true){
				// 		var Request = this.GetRequest();
    //                 	var subjectId = Request['id'];
    //                 	var curvideo = {id:id,subjectId:subjectId,url:url,index:index};
    //                 	sessionStorage.setItem("curvideo",JSON.stringify(curvideo));
				// 		window.location.href="./courseDetailPlay.html";
				// 	}else{
				// 		alert("请点击开始学习");
				// 	}
                  	
				// },
				//浏览量增加
				seeAmount:function(){
					var Request = this.GetRequest();
                    var id = Request['id'];
                    var obj = JSON.stringify({
                        "id": id
                    });
					httpHelperpost("/api/subjects/seeAmount", obj, function(isSuccess, data) {
                        if (isSuccess == true) {
                            var response = data.responseText;
                            var value = JSON.parse(response);

                            // console.log(response);

                            if(value.code == 0){
                                console.log(value.message);
                            }else if(value.code==401){
                                alert(value.message);
                                window.location.href='./login.html';
                            }else{
                                alert(value.message);
                                console.log("浏览量增加失败");
                            }
                        }else {}
                    });
				},
                GetRequest:function () {
            		var url = location.search; //获取url中"?"符后的字串
            		var theRequest = new Object();
            		if (url.indexOf("?") != -1) {
                		var str = url.substr(1);
                		strs = str.split("&");
                		for (var i = 0; i < strs.length; i++) {
                    		theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
                		}
            		}
            		return theRequest;
        		},
				add:function (url) {
					return "/content"+url;
				}
			},
            computed:{
              	levelName:function () {
					if(this.courseDetail.level==1){
					    return "入门";
					}else if(this.courseDetail.level==2){
                        return "进阶";
					}else if(this.courseDetail.level==3){
                        return "高级";
                    }
                },
                clsPercent:function(){
                    if(this.courseDetail.videos==undefined||this.courseDetail.videos==null||this.courseDetail.videos==""){
                        return 0;
                    }else{
                        var completed = this.courseDetail.completed;
                        var total = this.courseDetail.videos.length;
                        return completed+"/"+total;
                    }
                    
                },
                percentIs:function(){
                    if(this.courseDetail.videos==undefined||this.courseDetail.videos==null||this.courseDetail.videos==""){
                        return 0;
                    }else{
                        var percent = (this.courseDetail.completed/this.courseDetail.videos.length)*100;
                        if(percent==""||percent==undefined||percent==null||isNaN(percent)){
                            percent = 0;
                        }
                        setTimeout(function () {
                            $(".centerBgLight_proBlue").width(percent+"%");
                        },10);
                        // console.log(percent);
                        return percent.toFixed(2);
                    }
                    
                }
			},
            components: {
                'all-header': allheader,
                'all-footer': allfooter
            }
        })
    }
</script>
</html>